<template>
	<div style="height: 100%;background-color: wheat;overflow: auto;">
		<!-- 用户系统注册 -->
		<div class="weui-cells weui-cells_radio" style="background-color: transparent;color: white;font-weight: bold;">
			<label class="weui-cell weui-check__label">
				<div class="weui-cell__bd">
					<p>用户注册</p>
				</div>
			</label>
		</div>
		<div class="weui-cells weui-cells_form" style="background-color:transparent;">
			<div class="weui-cell">
				<div class="weui-cell__hd wd">
					<img class="img" src="../../assets/img/wx/user.png" />
				</div>
				<div></div>
				<div class="weui-cell__bd weui-cell_primary">
					<input placeholder="昵称" v-model="userMsg.nickname" class="weui-input">
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd wd">
					<img class="img" src="../../assets/img/manager/shouji.png" />
				</div>
				<div class="weui-cell__bd weui-cell_primary">
					<input @blur="checkPhone" placeholder="手机号" type="number" maxlength="11" v-model="userMsg.tele_phone"
						class="weui-input">
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd wd">
					<img class="img" src="../../assets/img/wx/mima.png" />
				</div>
				<div class="weui-cell__bd weui-cell_primary">
					<input placeholder="密码" type="password" v-model="userMsg.password" class="weui-input">
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd wd">
					<img class="img" src="../../assets/img/wx/mima.png" />
				</div>
				<div class="weui-cell__bd weui-cell_primary">
					<input placeholder="确认密码" type="password" v-model="doublePassword" class="weui-input">
				</div>
			</div>
			<div class="weui-cell ">
				<div class="weui-cell__hd wd">
					<img class="img" src="../../assets/img/manager/code.png" />
				</div>
				<div class="weui-cell__bd ">
					<input v-model="vcode" placeholder="图形验证码" class="weui-input">
				</div>
				<div class="weui-cell__ft">
					<Code></Code>
				</div>
			</div>
			<div class="weui-cell ">
				<div class="weui-cell__hd wd">
					<img class="img" src="../../assets/img/manager/code.png" />
				</div>
				<div class="weui-cell__bd weui-cell_primary">
					<input type="number" v-model="phone_vcode" name="phone_vcode" placeholder="手机验证码"
						class="weui-input">
				</div>
				<div class="weui-cell__ft "><a style="color: rgb(242 163 43);" @click="createCode"
						class="weui-vcode-btn">{{data.contentDesc}}</a></div>
			</div>

		</div>
		<div class="weui-cells__tips"></div>
		<div class="weui-btn-area">
			<a @click="goRegister" class="weui-btn weui-btn_primary">注册</a>
		</div>
	</div>
</template>

<script>
	import Code from '@/conpon/code.vue'
	import {
		createCode
	}
	from '@/apis/common/common.js'
	import {
		checkPhone,userRegister
	} from '@/apis/wx/weixinJs.js'
	import apis from '@/utils/apis.js'
	import constant from '@/utils/constant.js' //引入
	export default {
		components: {
			Code
		},
		data() {
			return {
				//手机验证码先关参数
				data: {
					textFlag: true,
					contentDesc: "获取手机验证码",
					ipttime: 0,
					timeSignInterval: null,
					timeOutSign: 'Y' //是否超时
				},
				userMsg: {
					nickname: '',
					tele_phone: '',
					password: '',
				},
				doublePassword: '', //再次密码
				vcode: '', //图形验证码
				original_vcode: '', //原始图形
				phone_vcode: '', //手机验证码
				phoneCheckFlag:false,//手机号验证
			}
		},
		created() {

		},
		methods: {
			//验证手机号
			checkPhone() {
				if (this.userMsg.tele_phone != '') {
					checkPhone(apis.checkPhone, {
						phone: this.userMsg.tele_phone
					}).then(res => {
						if (res.resultCode != constant.SUCCESS ) {
							this.showMsg(res.resultMsg,null,"danger");
							this.phoneCheckFlag = true;
						} 
					})
				}
			},
			//去注册
			goRegister() {
				let isOk = this.valid();
				if (isOk) {
					userRegister(apis.register,this.userMsg).then( res=>{
						if (res.resultCode == constant.SUCCESS ) {
							this.showMsg(res.resultMsg,null,"success");
							this.goLogin =  setTimeout(() =>{
							  this.$router.replace({name:"wxLogin"});
							},1000)
						}	
					})
				}
			},
			//设置图形验证码
			setOriginCode(code) {
				this.original_vcode = code;
			},
			//获取手机验证码
			createCode() {
				this.startSignIterval()
			},
			startSignIterval() {
				let maxTime = 180; //10;//180
				this.data.timeOutSign = "N";
				this.data.textFlag = false;
				this.data.timeCon = "有效期：" + maxTime + "S";
				this.data.timeSignInterval = setInterval(() => {
					//console.log("rest timeSign1:"+maxTime);
					this.data.ipttime = maxTime;
					maxTime--;

					if (maxTime < 1) {
						this.data.contentDesc = "获取手机验证码";
						this.data.textFlag = true;
						clearInterval(this.data.timeSignInterval);
					} else {
						this.data.contentDesc = "有效期：" + maxTime + "s";
					}

					if (maxTime == 0) {
						timeOutSign = "Y";
						this.data.ipttime = maxTime;
						return false;
					}
				}, 1000);
			},
			valid() {
				if (this.userMsg.nickname == '') {
					this.showMsg(null, "昵称", null);
					return false;
				}
				if (this.userMsg.telePhone == "") {
					this.showMsg(null, "手机号", null);
					return false;
				}
				if (this.userMsg.password == "") {
					this.showMsg(null, "密码", null);
					return false;
				}
				if (this.doublePassword != this.userMsg.password) {
					this.showMsg("两次密码输入不一致", null, null);
					return false;
				}
				if (this.doublePassword == "") {
					this.showMsg(null, "确认密码", null);
					return false;
				}
				if (this.vcode == "") {
					this.showMsg(null, "图形验证码", null);
					return false;
				}
				if (this.phone_vcode == "") {
					this.showMsg(null, "手机验证码", null);
					return false;
				}
				//测试
				this.data.timeOutSign = "Y";
				//测试
				if (this.data.timeOutSign == "N") {
					this.showMsg( "手机验证码已过期",null, null);
					return false;
				}
				return true;
			},
			showMsg(text, msg, type) {
				this.$toast({
					text: text || '请输入' + msg + "!",
					type: type || 'warning',
					duration: 1000
				});

			},
		},
		destroyed() {
			clearInterval(this.data.timeSignInterval);
		}
	}
</script>

<style>
	.wx_login {
		/* background-image: url(../assets/bg.jpg); */
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	.weui-cells {
		background-color: transparent
	}

	.img {
		width: 45%;
	}

	.wd {
		width: 20%;
	}
</style>
